<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" title="新增地址" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="addaddress">
			<view class="addaddress-info" v-if="name || (label && address)">
				<view class="addaddress-info-name" v-if="name">{{ name }} {{ sex === '1' ? '先生' : sex === '0' ? '女士' : '' }} {{ phone }}</view>
				<view class="addaddress-info-detail" v-if="label && address">{{ label }}-{{ address }}</view>
			</view>
			<view v-if="latitude && longitude" class="addaddress-map"><map scale="14" class="addaddress-map-wrap" :latitude="latitude" :longitude="longitude"></map></view>
			<view class="addaddress-content">
				<view class="addaddress-content-name">
					<text class="addaddress-content-name-txt">姓名</text>
					<input placeholder="请输入姓名" class="addaddress-content-name-input" v-model="name" />
					<view class="addaddress-content-name-sex">
						<view @click="onClickModifySex('1')" class="addaddress-content-name-sex-left">
							<view v-if="sex==='1'" >
								<image :src="commonImg('select.png')" class="addaddress-content-name-sex-left-img"></image>
							</view>
							<view v-else>
								<image :src="commonImg('no-select.png')" class="addaddress-content-name-sex-left-img"></image>
							</view>
							<text class="addaddress-content-name-sex-left-txt">先生</text>
						</view>
						<view @click="onClickModifySex('0')" class="addaddress-content-name-sex-left">
							<view v-if="sex==='0'" >
								<image :src="commonImg('select.png')" class="addaddress-content-name-sex-left-img"></image>
							</view>
							<view v-else>
								<image :src="commonImg('no-select.png')" class="addaddress-content-name-sex-left-img"></image>
							</view>
							<text class="addaddress-content-name-sex-left-txt">女士</text>
						</view>
					</view>
				</view>
				<view class="addaddress-content-tel">
					<text class="addaddress-content-tel-txt">联系电话</text>
					<input v-model="phone" placeholder="请输入手机号码" class="addaddress-content-tel-input" />
				</view>
				<view class="addaddress-content-tel">
					<text class="addaddress-content-tel-txt addaddress-content-tel-txt-ssq">省市区</text>
					<view v-if="label" @click="onClickOpenAddress" class="addaddress-content-tel-input addaddress-content-tel-input-address">{{ label }}</view>
					<view v-else class="addaddress-content-tel-input addaddress-content-tel-input-address addaddress-content-tel-input-address-hui" @click="onClickOpenAddress">
						请选择省市区
					</view>
				</view>
				<view class="addaddress-content-address">
					<text class="addaddress-content-address-txt addaddress-content-tel-txt-ssq">详细地址</text>
					<view class="addaddress-content-address-input addaddress-content-address-input-xxdz">
						<input v-model="address" placeholder="请输入详细地址" class="addaddress-content-address-input-input" />
						<image v-if="address" :src="commonImg('close.png')" @click="address = ''" class="addaddress-content-address-input-close"></image>
					</view>
				</view>
			</view>
			<view class="addaddress-savebtn"><button @click="addAddress" class="addaddress-savebtn-btn">保存</button></view>
			<!-- 鬼也晓得我为什么放在外面，但是如果放在里面的话，会有BUG -->
			<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirmAddress" themeColor="#007AFF"></simple-address>
		</view>
	</view>
</template>

<script>
import { config } from '@/utils/config.js';
import { myMixin } from '@/utils/mixin.js';
import simpleAddress from '@/components/simple-address/simple-address.nvue';
import provinceData from '@/components/simple-address/city-data/province.js';
import cityData from '@/components/simple-address/city-data/city.js';
import areaData from '@/components/simple-address/city-data/area.js';
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
export default {
	mixins: [myMixin],
	components: {
		simpleAddress,
		uniNavBar
	},
	watch: {
		address() {
			// 节流函数，别删
			if (this.timer) {
				clearTimeout(this.timer);
			}
			if (!this.address) {
				return false;
			}
			this.timer = setTimeout(() => {
				this._getMyLongitudeAndLatitudeByAddress(); // 根据address请求经纬度
			}, 888);
		}
	},
	data() {
		return {
			timer: null,
			address: '',
			name: '',
			phone: '',
			sex: '', // 1是男的，0是女的
			cityPickerValueDefault: [0, 0, 0],
			label: '',
			provinceId: '',
			cityId: '',
			areaId: '',
			province: '',
			city: '',
			area: '',
			longitude: '',
			latitude: '',
			id: ''
		};
	},
	onLoad(e) {
		if (e && e.id) {
			this.id = e.id;
		}
		if (e && e.recipientName) {
			this.name = e.recipientName;
		}
		if (e && e.sex) {
			this.sex = e.sex;
		}
		if (e && e.phone) {
			this.phone = e.phone;
		}
		if (e && e.provinceId) {
			this.provinceId = e.provinceId;
		}
		if (e && e.cityId) {
			this.cityId = e.cityId;
		}
		if (e && e.areaId) {
			this.areaId = e.areaId;
		}
		if (e && e.provinceId && e.cityId && e.areaId) {
			const province = provinceData.findIndex(item => item.value == e.provinceId);
			const city = cityData[province].findIndex(item => item.value == e.cityId);
			const area = areaData[province][city].findIndex(item => item.value == e.areaId);
			this.cityPickerValueDefault[0] = province;
			this.cityPickerValueDefault[1] = city;
			this.cityPickerValueDefault[2] = area;
			this.label = `${e.province}${e.city}${e.area}`;
			this.province = e.province
			this.city = e.city
			this.area = e.area
		}
		if (e && e.address) {
			this.address = e.address;
		}
		if (e && e.longitude) {
			this.longitude = e.longitude;
		}
		if (e && e.latitude) {
			this.latitude = e.latitude;
		}
	},
	methods: {
		back() {
			uni.navigateBack({})
		},
		_getMyLongitudeAndLatitudeByAddress() {
			if (!this.address) {
				return false;
			}
			if (!this.province) {
				return false;
			}
			if (!this.city) {
				return false;
			}
			if (!this.area) {
				return false;
			}
			uni.request({
				url: `${config.api_base_url}member/map/getPoint/`,
				method: 'POST',
				data: {
					city: `${this.city}`,
					address: this.address
				},
				success: res => {
					let { status, data } = res.data;
					if (status.flag === true && (data !== undefined) && data.length) {
						let location = data[0].location;
						this.longitude = location.split(',')[0];
						this.latitude = location.split(',')[1];
					} else {
						this.longitude = 0;
						this.latitude = 0;
					}
				},
				fail: () => {
					this.longitude = 0;
					this.latitude = 0;
					uni.showToast({
						icon: 'none',
						title: '请求经纬度失败, 网络异常'
					});
				}
			});
		},
		onClickModifySex(sex) {
			this.sex = sex;
		},
		onConfirmAddress(e) {
			this.label = e.label;
			this.provinceId = e.provinceCode;
			this.cityId = e.cityCode;
			this.areaId = e.areaCode;
			this.province = e.provinceName;
			this.city = e.cityName;
			this.area = e.areaName;
		},
		onClickOpenAddress() {
			this.$refs.simpleAddress.open();
		},
		addAddress() {
			if (!this.name) {
				uni.showToast({
					icon: 'none',
					title: '请填写姓名'
				});
				return false;
			}
			if (!this.phone) {
				uni.showToast({
					icon: 'none',
					title: '请填写手机号'
				});
				return false;
			}
			if (this.sex !== '1' && this.sex !== '0') {
				uni.showToast({
					icon: 'none',
					title: '请选择性别'
				});
				return false;
			}
			if (!this.label) {
				uni.showToast({
					icon: 'none',
					title: '请选择省市区'
				});
				return false;
			}
			if (!this.address) {
				uni.showToast({
					icon: 'none',
					title: '请填写详细地址'
				});
				return false;
			}
			if (!this.id) {
				uni.showLoading({ title: '保存中' })
				uni.request({
					url: `${config.api_base_url}member/address`,
					method: 'POST',
					data: {
						recipientName: this.name,
						phone: this.phone,
						sex: this.sex,
						province: this.province,
						city: this.city,
						area: this.area,
						provinceId: this.provinceId,
						cityId: this.cityId,
						areaId: this.areaId,
						address: this.address,
						longitude: this.longitude,
						latitude: this.latitude
					},
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					success: res => {
						let { status, data } = res.data;
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '新增地址成功'
							});
							setTimeout(() => {
								uni.navigateBack({});
							}, 1500);
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '新增地址失败, 网络异常'
						});
					},
					complete: (() => {
						uni.hideLoading()
					})
				});
			} else {
				uni.showLoading({ title: '保存中' })
				uni.request({
					url: `${config.api_base_url}member/address/${this.id}`,
					method: 'PUT',
					data: {
						recipientName: this.name,
						phone: this.phone,
						sex: this.sex,
						province: this.province,
						city: this.city,
						area: this.area,
						provinceId: this.provinceId,
						cityId: this.cityId,
						areaId: this.areaId,
						address: this.address,
						longitude: this.longitude,
						latitude: this.latitude
					},
					header: {
						AUTH: 'ROBOT ' + uni.getStorageSync('token')
					},
					success: res => {
						let { status, data } = res.data;
						if (status.flag === true) {
							uni.showToast({
								icon: 'none',
								title: '保存地址成功'
							});
							setTimeout(() => {
								uni.navigateBack({});
							}, 1500);
						} else {
							uni.showToast({
								icon: 'none',
								title: status.msg
							});
						}
					},
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '保存地址失败, 网络异常'
						});
					},
					complete: (() => {
						uni.hideLoading()
					})
				});
			}
		}
	}
};
</script>
<style>
page {
	background-color: #f8f8f8;
}
</style>
<style scoped>
.addaddress {
	width: 100%;
	box-sizing: border-box;
	padding-top: 16rpx;
	padding-left: 16rpx;
	padding-right: 14rpx;
}
.addaddress-info {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	padding-top: 38rpx;
	padding-left: 38rpx;
	padding-bottom: 38rpx;
	padding-right: 38rpx;
	display: flex;
	flex-direction: column;
}
.addaddress-info-name {
	font-size: 28rpx;
	color: rgba(0, 0, 0, 0.85);
	font-weight: 600;
	line-height: 40rpx;
	margin-bottom: 4rpx;
}
.addaddress-info-detail {
	font-size: 24rpx;
	line-height: 34rpx;
	color: #6d7278;
	font-weight: 400;
}
.addaddress-map {
	width: 100%;
	height: 400rpx;
	background-color: #6d7278;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	border-radius: 12rpx;
	margin-top: 16rpx;
}
.addaddress-map-wrap {
	width: 100%;
	height: 400rpx;
}
.addaddress-content {
	width: 100%;
	background-color: #fff;
	border-radius: 12rpx;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
	padding-top: 32rpx;
	padding-right: 34rpx;
	padding-bottom: 44rpx;
	padding-left: 34rpx;
	display: flex;
	flex-direction: column;
	margin-top: 16rpx;
}
.addaddress-content-name {
	width: 100%;
	height: 72rpx;
	line-height: 72rpx;
	display: flex;
	align-items: center;
}
.addaddress-content-name-txt {
	font-size: 28rpx;
	color: #000000;
	line-height: 40rpx;
	font-weight: 600;
	margin-right: 10rpx;
}
.addaddress-content-name-input {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	width: 272rpx;
	height: 100%;
	background: rgb(255, 255, 255);
	border-radius: 12rpx;
	border: 2rpx solid rgb(221, 221, 221);
	font-size: 28rpx;
	padding-left: 10rpx;
	margin-right: 24rpx;
}
.addaddress-content-name-sex {
	display: flex;
	align-items: center;
}
.addaddress-content-name-sex-left {
	display: flex;
	align-items: center;
	margin-right: 20rpx;
}
.addaddress-content-name-sex-left:last-child {
	margin-right: 0;
}
.addaddress-content-name-sex-left-img {
	width: 33rpx;
	height: 33rpx;
	border-radius: 50%;
	margin-right: 10rpx;
}
.addaddress-content-name-sex-left-txt {
	font-size: 28rpx;
	color: #000000;
	line-height: 40rpx;
	font-weight: 600;
}
.addaddress-content-tel {
	margin-top: 24rpx;
	width: 100%;
	display: flex;
	align-items: center;
}
.addaddress-content-tel-txt {
	font-size: 28rpx;
	color: #000000;
	line-height: 40rpx;
	font-weight: 600;
	margin-right: 18rpx;
}
.addaddress-content-tel-input {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	width: 504rpx;
	height: 72rpx;
	line-height: 72rpx;
	font-size: 30rpx;
	line-height: 42rpx;
	box-sizing: border-box;
	padding-left: 26rpx;
	border-radius: 12rpx;
	border: 2rpx solid rgb(221, 221, 221);
}
.addaddress-content-tel-txt-ssq {
	min-width: 112rpx;
}
.addaddress-content-tel-input-address {
	display: flex;
	align-items: center;
}
.addaddress-content-tel-input-address-hui {
	color: #a1a1a1;
}
.addaddress-content-city {
	margin-top: 24rpx;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 122rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.addaddress-content-city-item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 192rpx;
}
.addaddress-content-city-item-txt {
	font-size: 28rpx;
	color: #333333;
	line-height: 40rpx;
	font-weight: 600;
	margin-bottom: 10rpx;
}
.addaddress-content-city-item uni-picker {
	font-size: 28rpx;
	width: 192rpx;
	height: 72rpx;
	line-height: 72rpx;
	border-radius: 12rpx;
	border: 2rpx solid rgb(221, 221, 221);
}
.addaddress-content-address {
	margin-top: 24rpx;
	width: 100%;
	display: flex;
	align-items: center;
}
.addaddress-content-address-txt {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	line-height: 40rpx;
	margin-right: 18rpx;
}
.addaddress-content-address-input {
	width: 100%;
	height: 80rpx;
	border-radius: 12rpx;
	border: 2rpx solid rgb(221, 221, 221);
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-right: 30rpx;
}
.addaddress-content-address-input-input {
	padding: 0;
	margin: 0;
	outline: none;
	border: none;
	width: calc(100% - 60rpx);
	height: 100%;
	box-sizing: border-box;
	padding-left: 22rpx;
	font-size: 30rpx;
	line-height: 80rpx;
}
.addaddress-content-address-input-close {
	width: 30rpx;
	height: 30rpx;
	border-radius: 50%;
}
.addaddress-content-address-input-xxdz {
	width: 504rpx;
}
.addaddress-savebtn {
	width: 100%;
	height: 94rpx;
	box-sizing: border-box;
	padding-left: 70rpx;
	padding-right: 70rpx;
	position: fixed;
	left: 0;
	bottom: 84rpx;
}
.addaddress-savebtn-btn {
	width: 100%;
	height: 100%;
	background-color: #f02230;
	border-radius: 12rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32rpx;
	color: #fff;
}
@media screen and (max-width: 350px) {
	.addaddress-savebtn {
		position: static;
		left: 0;
		bottom: 0;
		margin-top: 150rpx;
	}
}
</style>
